<template>
<div>
  <nav class="nav">
    <div class="nav-wrapper">
      <div class="logo">
        <img src="@/assets/images/home/logo.png" alt="" @click="$router.push({path:'/home'})" />
      </div>
      <div class="nav-box">
        <ul class="nav-list">
          <li>
            <router-link to="/overview">车型总览</router-link>
            <span class="sanjiao"></span>
            <div class="car-info">
              <div class="left">
                <div class="shang">
                  <span>纯电</span>
                  <ul>
                    <a href="#/car?id=0">
                    <li>
                      <h4>UX 300e</h4>
                      <img
                        src="@/assets/images/home/home_100000036.png"
                        alt=""
                      />
                      <p class="car">豪华纯电动车型</p>
                      <p class="price">建议零售价362,000元起</p>
                    </li></a>
                  </ul>
                </div>
                <div class="zhong">
                  <span>轿跑/轿车</span>
                  <ul>
                    <a href="#/car?id=1">
                    <li>
                      <h4>ES</h4>
                      <img
                        src="@/assets/images/home/home_100000002.png"
                        alt=""
                      />
                      <p class="car">中大型豪华行政级轿车</p>
                      <p class="price">建议零售价294,900元起</p>
                    </li></a><a href="#/car?id=2">
                    <li>
                      <h4>LS</h4>
                      <img
                        src="@/assets/images/home/home_100000003.png"
                        alt=""
                      />
                      <p class="car">旗舰级豪华轿车</p>
                      <p class="price">建议零售价878,000元起</p>
                    </li></a><a href="#/car?id=3">
                    <li>
                      <h4>LC</h4>
                      <img
                        src="@/assets/images/home/home_100000004.png"
                        alt=""
                      />
                      <p class="car">旗舰级豪华GT轿跑</p>
                      <p class="price">建议零售价1,155,000元起</p>
                    </li></a>
                  </ul>
                </div>
                <div class="xia">
                  <span>SUV/MPV</span>
                  <ul><a  href="#/car?id=4">
                    <li>
                      <h4>UX</h4>
                      <img
                        src="@/assets/images/home/home_100000005.png"
                        alt=""
                      />
                      <p class="car">豪华都市SUV</p>
                      <p class="price">建议零售价362,000元起</p>
                    </li></a><a  href="#/car?id=5">
                    <li>
                      <h4>NX</h4>
                      <img
                        src="@/assets/images/home/home_100000006.png"
                        alt=""
                      />
                      <p class="car">中型豪华SUV</p>
                      <p class="price">建议零售价362,000元起</p>
                    </li></a><a  href="#/car?id=6">
                    <li>
                      <h4>RX</h4>
                      <img
                        src="@/assets/images/home/home_100000007.png"
                        alt=""
                      />
                      <p class="car">中大型豪华SUV</p>
                      <p class="price">建议零售价362,000元起</p>
                    </li></a><a  href="#/car?id=7">
                    <li>
                      <h4>LM</h4>
                      <img
                        src="@/assets/images/home/home_100000008.png"
                        alt=""
                      />
                      <p class="car">旗舰级豪华SUV</p>
                      <p class="price">建议零售价362,000元起</p>
                    </li></a>
                  </ul>
                </div>
              </div>
              <div class="right">
                <ul>
                  <li @click="$router.push({path:'/car',query:{id:1}})">
                    <h4>新雷克萨斯ES</h4>
                    <h4>现已上市</h4>
                  </li>
                  <li @click="$router.push({path:'/overview'})"><h4>车型筛选</h4></li>
                  <li @click="$router.push({path:'/jisuanqi'})"><h4>金融计算器</h4></li>
                  <li><h4>YACHT</h4></li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <router-link to="/brand">品牌天地</router-link>
            <span class="sanjiao"></span>
            <div class="car-info">
              <div class="left">
                <ul class="title">
                  <li>
                    <a href="#">品牌历史</a>
                    <div class="content">
                      <div><h4>品牌历史</h4></div>
                      <div>
                        <p>回眸岁月，雷克萨斯前行之路上成就不止:</p>
                        <p>所有的一切，都诉说着雷克萨斯历日旷久的斐然业绩，更预言着品牌未来的前进方向。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_1.jpg" alt=""></div>
                    </div>
                  </li>
                  <li>
                    <a href="#">匠人匠心</a>
                    <div class="content">
                      <div><h4>匠人匠心</h4></div>
                      <div>
                        <p>雷克萨斯倾注匠心于产品，造就每一个细节的极致，从看到它到驾驶它，都能感受到人车合一的共鸣。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_2.jpg" alt=""></div>
                    </div>
                  </li>
                  <li>
                    <a href="#">设计理念</a>
                    <div class="content">
                      <div><h4>设计理念</h4></div>
                      <div>
                        <p>设计理念L-finesse预纯妙是雷克萨斯全线产品的设计哲学。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_3.jpg" alt=""></div>
                    </div>
                    </li>
                  <li>
                    <a href="#">兼容之道</a>
                    <div class="content">
                      <div><h4>兼容之道</h4></div>
                      <div>
                        <p>雷克萨斯智·混动家族以兼·融之道，令动感与优雅互衡，科技与环保相生。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_4.jpg" alt=""></div>
                    </div>
                    </li>
                  <li>
                    <a href="#">至纯之音</a>
                    <div class="content">
                      <div><h4>至纯之音</h4></div>
                      <div>
                        <p>Mark LevinsonR为每一辆雷克萨斯量身定做音响系统，创新设计的功放将失真减到最低，始终置于车内最佳位置的扬声器，为品位卓越的雷克萨斯车主呈现动感清晰的音效，完美再现艺术家所表现的音乐世界。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_5.jpg" alt=""></div>
                    </div>
                    </li>
                  <li>
                    <a href="#">环保理念</a>
                    <div class="content">
                      <div><h4>环保理念</h4></div>
                      <div>
                        <p>注重节约，能源效率至上，将汽车整个生命周期对环境的所有影响降至最低。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_6.jpg" alt=""></div>
                    </div>
                    </li>
                  <li>
                    <a href="#">概念车</a>
                    <div class="content">
                      <div><h4>概念车</h4></div>
                      <div>
                        <p>任何设计风格和技术上的极大突破，均预示着L-finesse设计语言未来的发展方向及对纯粹驾驶乐趣的不懈追求。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_history_7.jpg" alt=""></div>
                    </div>
                    </li>
                  <li>
                    <a href="#">全球活动品牌</a>
                    <div class="content">
                      <div><h4>全球活动品牌</h4></div>
                      <div>
                        <p>时刻关注有意义的创新，激发出前瞻领先的情感。</p>
                      </div>
                      <div><img src="@/assets/images/home/home_100000967.jpg" alt=""></div>
                    </div>
                    <ol>
                      <li><a href="#">雷克萨斯品牌杂志</a></li>
                      <li><a href="#">雷克萨斯全球设计大赛</a></li>
                      <li><a href="#">雷克萨斯品牌体验空间INTERSECT</a></li>
                      <li><a href="#">雷克萨斯全球微电影</a></li>
                    </ol>
                  </li>
                </ul>
              </div>
              <div class="right"></div>
            </div>
          </li>
          <li>
            <router-link to="/dianqi">电气化</router-link>
            <span class="sanjiao"></span>
            <div class="car-info">
              <div class="left">
                <ul class="title">
                  <li>
                    <a href="#/dianqi">雷克萨斯电气化</a>
                    <div class="content">
                      <div><h4>品牌历史</h4></div>
                      <div>
                        <p>电气化概念车LF-Z</p>
                        <p>LEXUS雷克萨斯加速迈向电气化未来</p>
                      </div>
                      <div><img src="@/assets/images/home/dianqihua.jpg" alt=""></div>
                    </div>
                    <ol>
                      <li><a href="#">电气化概念车LF-Z</a></li>
                      <li><a href="#">智·混动车型</a></li>
                      <li><a href="#">电动车型</a></li>
                    </ol>
                  </li>
                </ul>
              </div>
              <div class="right"></div>
            </div>
          </li>
          <li>
            <router-link to="/performance">F高性能系列</router-link>
            <span class="sanjiao"></span>
            <div class="car-info">
              <div class="left">
                <ul class="title">
                  <li>
                    <a href="#/performance">F高性能系列</a>
                    <div class="content">
                      <div><h4>F高性能系列</h4></div>
                      <div>
                        <p>F的精神，由赛道传奇延续至平素驾控。无论何时何地，酣畅的驾控快感从无休止</p>
                      </div>
                      <div><img src="@/assets/images/home/gaoxingneng.jpg" alt=""></div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="right"></div>
            </div>
          </li>
          <li>
            <router-link to="/service">车主服务</router-link>
            <span class="sanjiao"></span>
            <div class="car-info">
              <div class="left">
                <ul class="title">
                  <li>
                    <a href="#">售后服务</a>
                    <div class="content">
                      <div><h4>售后服务</h4></div>
                      <div>
                        <p>雷克萨斯售后服务，全心投入,只为您全心满意。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_1.jpg" alt=""></div>
                    </div>
                  </li>
                  <li><a href="#">e-LEXUS CLUB智能手机应用</a>
                    <div class="content">
                      <div><h4>e-LEXUS CLUB智能手机应用</h4></div>
                      <div>
                        <p>雷克萨斯车主可以通过本应用程序随时随地享受雷克萨斯尊崇服务,畅享智能驾车新境界。。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_2.jpg" alt=""></div>
                    </div></li>
                  <li><a href="#">LEXUS Connect雷克萨斯智行互联</a>
                    <div class="content">
                      <div><h4>LEXUS Connect雷克萨斯智行互联</h4></div>
                      <div>
                        <p>撷取科技灵感，为您带来超乎期许的尊贵体验;以绝妙创想，开启智能驾车新享受。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_3.jpg" alt=""></div>
                    </div></li>
                  <li><a href="#">雷克萨斯智能副驾G-BOOK</a>
                    <div class="content">
                      <div><h4>雷克萨斯智能副驾G-BOOK</h4></div>
                      <div>
                        <p>撷取科技灵感，为您带来超乎期许的尊贵体验;以绝妙创想，开启智能驾车新享受。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_4.jpg" alt=""></div>
                    </div></li>
                  <li><a href="#">雷克萨斯手机互联</a>
                    <div class="content">
                      <div><h4>雷克萨斯手机互联</h4></div>
                      <div>
                        <p>将您的手机与雷克萨斯互联，自如掌控丰富的多媒体功能，尽享互联带来的驾乘体验。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_5.jpg" alt=""></div>
                    </div></li>
                  <li><a href="#">雷克萨斯汽车精品</a>
                    <div class="content">
                      <div><h4>售后服务</h4></div>
                      <div>
                        <p>雷克萨斯售后服务，全心投入,只为您全心满意。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_6.jpg" alt=""></div>
                    </div></li>
                  <li><a href="#">雷克萨斯生活精品</a>
                    <div class="content">
                      <div><h4>雷克萨斯生活精品</h4></div>
                      <div>
                        <p>安全个性化的雷克萨斯汽车精品，进一步提升雷克萨斯整车魅力的同时，为顾客提供更加舒适性的驾乘乐趣。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_7.jpg" alt=""></div>
                    </div></li>
                  <li>
                    <a href="#">雷克萨斯顾客常见问与答</a>
                    <div class="content">
                      <div><h4>雷克萨斯顾客常见问与答</h4></div>
                      <div>
                        <p>LEXUS雷克萨斯顾客服务中心，为您提供贴心迅捷的服务。</p>
                      </div>
                      <div><img src="@/assets/images/home/fuwu_8.jpg" alt=""></div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="right"></div>
            </div>
          </li>
          <li>
            <router-link to="/news">新闻资讯</router-link>
            <span class="sanjiao"></span>
            <div class="car-info">
              <div class="left">
                <ul class="title">
                  <li>
                    <a href="#/news">新闻资讯</a>
                    <div class="content">
                      <div><h4>新闻资讯</h4></div>
                      <div>
                        <p>在这里您可以浏览关于雷克萨斯的所有资讯及优惠活动。</p>
                      </div>
                      <div><img src="@/assets/images/home/news.jpg" alt=""></div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="right"></div>
            </div>
          </li>
          <li>
            <router-link to="/jisuanqi">金融计算器</router-link>
          </li>
          <li>
            <router-link to="/drive">预约试驾</router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <el-backtop :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
    >
      UP
    </div>
  </el-backtop>
  <router-view />
  </div>
</template>

<script>
export default {
  name: "ExportNav",
};
</script>

<style lang="scss" scoped>
.nav {
  width: 1140px;
  height: 60px;
  margin: 0 auto;
  .nav-wrapper {
    width: 1140px;
    display: flex;
    justify-content: space-between;
    .logo {
      width: 268px;
      height: 60px;
      line-height: 60px;
      img {
        cursor: pointer;
        width: 100%;
      }
    }
    .nav-box {
      width: 735px;
      height: 60px;
      line-height: 60px;
      .nav-list {
        height: 60px;
        display: flex;
        justify-content: flex-end;
        > li {
          position: relative;
          >a {
            font-size: 15px;
            padding: 20px 13px;
          }
          .car-info {
            width: 1160px;
            height: 560px;
            border: 1px solid #ccc;
            background-color: #fff;
            box-sizing: border-box;
            display: none;
            position: absolute;
            left: -437px;
            top: 60px;
            overflow: hidden;
            z-index: 16666;
          }
          .sanjiao {
            display: none;
            width: 0;
            height: 0;
            border: 10px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            position: absolute;
            top: 42px;
            left: 50%;
            margin-left: -10px;
            z-index: 50000;
          }
          .sanjiao::before,
          .sanjiao::after {
            content: "";
            display: block;
            width: 1px;
            height: 12px;
            background-color: #ccc;
            position: absolute;
            top: -2px;
            left: -5px;
            transform: rotate(45deg);
          }
          .sanjiao::after {
            top: -2px;
            left: 4px;
            transform: rotate(-45deg);
          }
          &:hover .sanjiao {
            display: block;
          }
          &:hover .car-info {
            display: flex;
          }
        }
        > li:first-child {
          .left {
            width: 773px;
            height: 558px;
            div {
              width: 100%;
              height: 33.3333%;
              padding: 0 30px;
              box-sizing: border-box;
              position: relative;
              span {
                display: block;
                height: 16px;
                line-height: 16px;
                border-left: 2px solid #999;
                position: absolute;
                top: 20px;
                left: 15px;
                font-size: 13px;
                text-indent: 5px;
              }
              ul {
                display: flex;
                height: 100%;
                li {
                  width: 184px;
                  height: 100%;
                  cursor: pointer;
                  h4 {
                    color: #666;
                    height: 40px;
                    width: 155px;
                    text-align: center;
                    margin-top: 15px;
                  }
                  img {
                    width: 155px;
                    height: 62px;
                    transform: scale(1);
                    transition: all 0.3s linear;
                  }
                  p {
                    color: #333;
                    margin-top: -5px;
                    height: 25px;
                    font-size: 13px;
                    width: 155px;
                    text-align: center;
                  }
                  .car {
                    transform: translateY(0px);
                    transition: all 0.3s linear;
                  }
                  .price {
                    opacity: 0;
                    transform: translateY(15px);
                    transition: all 0.3s linear;
                  }
                }
                li:hover .price {
                  opacity: 1;
                  transform: translateY(-10px);
                }
                li:hover .car {
                  transform: translateY(-10px);
                }
                li:hover img {
                  transform: scale(0.8);
                }
              }
            }
            .shang {
              border-bottom: 1px solid #ccc;
            }
            .zhong {
              border-bottom: 1px solid #ccc;
            }
          }
          .right {
            width: 385px;
            height: 558px;
            ul {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              padding: 2px;
              box-sizing: border-box;
              li {
                flex-basis: 48%;
                flex-shrink: 0;
                flex-grow: 1;
                height: 275px;
                cursor: pointer;
                position: relative;
                text-align: center;
                h4 {
                  margin-top: 20px;
                  color: #fff;
                }
              }
              li:nth-child(1) {
                background: url(../assets/images/home/home_100000970.jpg)
                  no-repeat;
                background-size: 188px 281px;
                h4:last-child {
                  margin-top: -30px;
                }
              }
              li:nth-child(2) {
                background: url(../assets/images/home/home_100000971.jpg)
                  no-repeat;
                background-size: 188px 281px;
              }
              li:nth-child(3) {
                background: url(../assets/images/home/home_100000972.jpg)
                  no-repeat;
                background-size: 188px 281px;
                margin-top: 4px;
              }
              li:nth-child(4) {
                background: url(../assets/images/home/home_100000973.jpg)
                  no-repeat;
                background-size: 188px 281px;
                margin-top: 4px;
              }
              li::after {
                content: "";
                width: 188px;
                height: 281px;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                background-color: rgba(255, 255, 255, 0.2);
              }
              li:hover::after {
                display: block;
              }
            }
          }
        }
        > li:nth-child(2) {
          .car-info {
            left: -524px;
          }
        }
        > li:nth-child(3) {
          .car-info {
            left: -610px;
          }
        }
        > li:nth-child(4) {
          .car-info {
            left: -681px;
          }
        }
        > li:nth-child(5) {
          .car-info {
            left: -790px;
          }
        }
        > li:nth-child(6) {
          .car-info {
            left: -877px;
          }
        }
        > li:nth-child(n + 2) {
          .left {
            width: 482px;
            height: 558px;
            .title {
              padding: 40px 92px;
              box-sizing: border-box;
              position: relative;
              > li {
                height: 30px;
                .content{
                  display: none;
                  background-color: #fff;
                  position: absolute;
                  top: 0;
                  right: -676px;
                  h4{
                    height: 40px;
                    line-height: 40px;
                    margin-top: 22px;
                    margin-left: 40px;
                    color: #666;
                  }
                  p{
                    width: 600px;
                    height: 20px;
                    line-height: 20px;
                    margin-left: 40px;
                    font-size: 14px;
                    color: #666;
                  }
                  img{
                    width: 677px;
                    height: 405px;
                    margin-top: 70px;
                  }
                }
                ol {
                  margin-top: -30px;
                  margin-left: 25px;
                  li {
                    height: 30px;
                    a {
                      font-size: 14px;
                      color: #666;
                    }
                  }
                  > li:hover > a {
                    text-decoration: underline;
                  }
                }
              }
              > li:first-child .content{
                display: block;
              }
              > li:hover > a {
                text-decoration: underline;
              }
              > li:hover .content {
                display: block;
              }
            }
          }
          .right {
            width: 676px;
            height: 558px;
          }
        }
      }
    }
  }
}
</style> 